<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文献页码追加工具 - 99论文助手</title>
  
  <!-- 外部CSS库 -->
  <script src="css/tailwindcss.js"></script>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义CSS -->
  <link rel="stylesheet" href="css/style.css">
  
  <!-- Tailwind 配置 -->
  <script src="js/tailwind-config.js"></script>
  
  <!-- 共用导航栏组件 -->
  <script src="js/navbar.js"></script>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 font-inter min-h-screen flex flex-col">
  
  <!-- 导航栏将通过 navbar.js 动态加载 -->

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    
    <!-- 页面标题 -->
    <div class="text-center mb-8" style="animation: fadeInUp 0.6s ease-out both;">
      <h2 class="text-4xl font-bold text-dark mb-3">
        文献页码<span class="text-primary">追加工具</span>
      </h2>
      <p class="text-gray-600 text-lg">
        自动为硕士论文文献[D]标识追加页码，提升文献格式规范性
      </p>
    </div>

    <!-- 使用说明 -->
    <div class="max-w-6xl mx-auto mb-6" style="animation: fadeInUp 0.6s ease-out 0.1s both;">
      <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
        <div class="flex items-start">
          <i class="fa fa-info-circle text-blue-500 text-xl mr-3 mt-1"></i>
          <div>
            <h3 class="font-semibold text-blue-900 mb-1">使用说明</h3>
            <p class="text-blue-800 text-sm">
              1. 在左侧输入框粘贴需要处理的文献列表
              2. 工具会自动识别[D]标识的硕士论文文献并追加页码
              3. 页码范围为5-40页，起始页和末尾页相差不大于4页
              4. 右侧显示处理后的结果，点击"一键复制"即可复制
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 转换工具区域 -->
    <div class="max-w-6xl mx-auto" style="animation: fadeInUp 0.6s ease-out 0.2s both;">
      <div class="bg-white rounded-2xl shadow-soft p-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          
          <!-- 输入区域 -->
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <label class="text-lg font-semibold text-gray-700">
                <i class="fa fa-edit text-primary mr-2"></i>输入文献列表
              </label>
              <span class="text-sm text-gray-500" id="input-count">0 字符</span>
            </div>
            <textarea 
              id="input-text" 
              class="w-full h-96 p-4 border-2 border-gray-200 rounded-lg resize-none focus:border-primary focus:outline-none transition-colors text-sm leading-relaxed"
              placeholder="请在此处输入需要处理的文献列表...

例如：
[1]胡蕾蕾.马克思民生思想视域下中国共产党民生实践研究[D].扬州大学,2024.
[2]张三.人工智能在教育领域的应用研究[J].计算机科学,2023.
[3]李四.基于深度学习的图像识别技术研究[D].清华大学,2024.
[4]王五.现代企业管理模式创新研究[J].管理科学,2023."
            ></textarea>
            <div class="flex space-x-3">
              <button 
                id="clear-btn" 
                class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center"
              >
                <i class="fa fa-trash mr-2"></i>清空
              </button>
              <button 
                id="example-btn" 
                class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors flex items-center"
              >
                <i class="fa fa-lightbulb mr-2"></i>示例文献
              </button>
            </div>
          </div>

          <!-- 输出区域 -->
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <label class="text-lg font-semibold text-gray-700">
                <i class="fa fa-check-circle text-green-500 mr-2"></i>处理结果
              </label>
              <span class="text-sm text-gray-500" id="output-count">0 字符</span>
            </div>
            <textarea 
              id="output-text" 
              class="w-full h-96 p-4 border-2 border-gray-200 rounded-lg resize-none bg-gray-50 text-sm leading-relaxed"
              readonly
              placeholder="处理后的文献列表将显示在这里..."
            ></textarea>
            <div class="flex space-x-3">
              <button 
                id="copy-btn" 
                class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors flex items-center"
              >
                <i class="fa fa-copy mr-2"></i>一键复制
              </button>
              <button 
                id="download-btn" 
                class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center"
              >
                <i class="fa fa-download mr-2"></i>下载
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 处理统计 -->
    <div class="max-w-6xl mx-auto mt-6" style="animation: fadeInUp 0.6s ease-out 0.3s both;">
      <div class="bg-white rounded-2xl shadow-soft p-6">
        <h3 class="text-lg font-semibold text-gray-700 mb-4">
          <i class="fa fa-chart-bar text-primary mr-2"></i>处理统计
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="text-center p-4 bg-blue-50 rounded-lg">
            <div class="text-2xl font-bold text-blue-600" id="total-references">0</div>
            <div class="text-sm text-blue-800">总文献数</div>
          </div>
          <div class="text-center p-4 bg-green-50 rounded-lg">
            <div class="text-2xl font-bold text-green-600" id="processed-references">0</div>
            <div class="text-sm text-green-800">已处理</div>
          </div>
          <div class="text-center p-4 bg-yellow-50 rounded-lg">
            <div class="text-2xl font-bold text-yellow-600" id="thesis-references">0</div>
            <div class="text-sm text-yellow-800">硕士论文</div>
          </div>
          <div class="text-center p-4 bg-purple-50 rounded-lg">
            <div class="text-2xl font-bold text-purple-600" id="other-references">0</div>
            <div class="text-sm text-purple-800">其他文献</div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-8">
    <div class="max-w-6xl mx-auto px-4 text-center">
      <div class="flex items-center justify-center space-x-2 mb-4">
        <i class="fa fa-graduation-cap text-primary text-2xl"></i>
        <h3 class="text-xl font-bold text-dark">99论文助手</h3>
      </div>
      <p class="text-gray-600 mb-4">专业论文工具导航平台</p>
      <div class="flex justify-center space-x-6 text-sm text-gray-500">
        <a href="index.html" class="hover:text-primary transition-colors">首页</a>
        <a href="catalog-parser.html" class="hover:text-primary transition-colors">目录解析</a>
        <a href="quote-converter.html" class="hover:text-primary transition-colors">引号转换</a>
        <a href="page-number-adder.html" class="hover:text-primary transition-colors">页码追加</a>
        <a href="tu/index.html" class="hover:text-primary transition-colors">图表生成</a>
        <a href="about.html" class="hover:text-primary transition-colors">关于我们</a>
      </div>
      <div class="mt-4 text-sm text-gray-400">
        © 2025 99论文助手 - 专业论文工具导航平台
      </div>
    </div>
  </footer>

  <!-- 文献页码追加工具脚本 -->
  <script src="js/page-number-adder.js"></script>
</body>
</html>
